<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>图片列表</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <style>
      body {
        background-color: darkolivegreen;
      }

      .img-list {
        width: 225px;
        height: 225px;
        /*overflow: hidden;*/
        margin: 50px auto;
        background-color: yellow;
      }

      .img-list img {
        width: 100%;
      }

      /*:not(:last-child) 排除最后一个元素的css设置*/
      .img-list li:not(:last-child) {
        /*设置下边距*/
        margin-bottom: 9px;
      }
    </style>
  </head>

  <body>
    <ul class="img-list">
      <li>
        <a href="javascript:;">
          <img src="../img/golang1.png" alt="这是一张图片" />
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="../img/golang1.png" alt="这是一张图片" />
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="../img/golang1.png" alt="这是一张图片" />
        </a>
      </li>
    </ul>
  </body>
</html>
